<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    lineData: { type: Array, default: Array },
    lineTitle: {  type: String,
      default: '用户数据趋势分析' }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
       // 提取日期和数据
       var dates = this.lineData.map(item => item.Date);
        var loginData = this.lineData.map(item => item.LoginUserNum);
        var unlockData = this.lineData.map(item => item.UnlockUserNum);
        var userData = this.lineData.map(item => item.UserNum);

      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        title: {
                text: this.lineTitle,
                subtext: dates[0]+'——'+dates[dates.length-1],
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function(params) {
                    var result = params[0].axisValue + '<br/>';
                    params.forEach(function(item) {
                        result += item.marker + ' ' + item.seriesName + ': ' + item.value + '<br/>';
                    });
                    return result;
                }
            },
            legend: {
                data: ['登录用户数', '解锁用户数', '总用户数'],
                bottom: 10
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dates,
                axisLabel: {
                    rotate: 60
                }
            },
            yAxis: {
                type: 'value',
                name: '用户数'
            },
            series: [
                {
                    name: '登录用户数',
                    type: 'line',
                    data: loginData,
                    itemStyle: {
                        color: '#5470C6'
                    },
                    smooth: true
                },
                {
                    name: '解锁用户数',
                    type: 'line',
                    data: unlockData,
                    itemStyle: {
                        color: '#91CC75'
                    },
                    smooth: true
                },
                {
                    name: '总用户数',
                    type: 'line',
                    data: userData,
                    itemStyle: {
                        color: '#EE6666'
                    },
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            ]
      })
    }
  }
}
</script>
